<section id="body" class="element">
  <header class="element-header">
    <nav class="element-links">
        <span>
          Type: <strong>block</strong>
        </span>
      <span>
        Self-closing:
        <strong>
            No
        </strong>
      </span>
      <a class="element-links-direct" href="{{site.url}}/element/body/" data-element-name="body" data-tooltip="Single page for this element">Permalink</a>
      <a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="body">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/body" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="element-name">
      <a href="#body">
        <span>#</span>
        body
      </a>
    </h2>
    <div class="element-description">
      <p>The container for a web page&#39;s content. Must be a direct child of <code>&lt;html&gt;</code>, and must be an ancestor of all HTML elements (except where noted).</p>

    </div>
  </header>

      <div id="body-example-0" class="example">
        <p class="example-label">
          <strong>Example:</strong>
          <a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#body-example-0-code">Copy</a>
        </p>
        <article class="example-preview">
          <div id="body-example-0-code" class="example-code">{% highlight html %}<!DOCTYPE html>
<html>
  <head>
    <!-- Document metadata -->
  </head>
  <body>
    <!-- Document content -->
  </body>
</html>{% endhighlight %}</div>
        </article>
      </div>

</section>

<section id="head" class="element">
  <header class="element-header">
    <nav class="element-links">
        <span>
          Type: <strong>block</strong>
        </span>
      <span>
        Self-closing:
        <strong>
            No
        </strong>
      </span>
      <a class="element-links-direct" href="{{site.url}}/element/head/" data-element-name="head" data-tooltip="Single page for this element">Permalink</a>
      <a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="head">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/head" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="element-name">
      <a href="#head">
        <span>#</span>
        head
      </a>
    </h2>
    <div class="element-description">
      <p>Defines a container for a web page&#39;s <strong>metadata</strong>.</p>

    </div>
  </header>

      <div id="head-example-0" class="example">
        <p class="example-label">
          <strong>Example:</strong>
          <a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#head-example-0-code">Copy</a>
        </p>
        <article class="example-preview">
          <div id="head-example-0-code" class="example-code">{% highlight html %}<!DOCTYPE html>
<html>
  <head>
    <!-- Document metadata -->
  </head>
  <body>
    <!-- Document content -->
  </body>
</html>{% endhighlight %}</div>
        </article>
      </div>

</section>

<section id="html" class="element">
  <header class="element-header">
    <nav class="element-links">
        <span>
          Type: <strong>block</strong>
        </span>
      <span>
        Self-closing:
        <strong>
            No
        </strong>
      </span>
      <a class="element-links-direct" href="{{site.url}}/element/html/" data-element-name="html" data-tooltip="Single page for this element">Permalink</a>
      <a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="html">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/html" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="element-name">
      <a href="#html">
        <span>#</span>
        html
      </a>
    </h2>
    <div class="element-description">
      <p>Defines the <strong>root element</strong> of an HTML document. All other elements must be contained within this root element.</p>

    </div>
  </header>

      <div id="html-example-0" class="example">
        <p class="example-label">
          <strong>Example:</strong>
          <a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#html-example-0-code">Copy</a>
        </p>
        <article class="example-preview">
          <div id="html-example-0-code" class="example-code">{% highlight html %}<!DOCTYPE html>
<html>
  <head>
    <!-- Document metadata -->
  </head>
  <body>
    <!-- Document content -->
  </body>
</html>{% endhighlight %}</div>
        </article>
      </div>

</section>

<section id="link" class="element">
  <header class="element-header">
    <nav class="element-links">
      <span>
        Self-closing:
        <strong>
            No
        </strong>
      </span>
      <a class="element-links-direct" href="{{site.url}}/element/link/" data-element-name="link" data-tooltip="Single page for this element">Permalink</a>
      <a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="link">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/link" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="element-name">
      <a href="#link">
        <span>#</span>
        link
      </a>
    </h2>
    <div class="element-description">
      <p>Defines a <strong>link</strong> between the current web page and an external link or resource.</p>

    </div>
  </header>

      <div id="link-example-0" class="example">
        <p class="example-label">
          <strong>Example:</strong>
          <a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#link-example-0-code">Copy</a>
        </p>
        <article class="example-preview">
          <div id="link-example-0-code" class="example-code">{% highlight html %}<link rel="stylesheet" type="text/css" href="{{site.url}}/css/website.css">{% endhighlight %}</div>
        </article>
      </div>

    <article id="link-href" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="href">
            href
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the URL of the link.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="link-href-siteurlcsswebsitecss" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy href=&quot;{{site.url}}/css/website.css&quot;" data-clipboard-text="href=&quot;{{site.url}}/css/website.css&quot;">
                      "{{site.url}}/css/website.css"
                  </code>
                </h4>
              <div class="value-description">
                <p>You can pass an <strong>absolute</strong> URL.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><link  href="{{site.url}}/css/website.css"></link></div>
            </aside>
          </article>
          <article id="link-href-csswebsitecss" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy href=&quot;/css/website.css&quot;" data-clipboard-text="href=&quot;/css/website.css&quot;">
                      "/css/website.css"
                  </code>
                </h4>
              <div class="value-description">
                <p>You can pass a URL <strong>relative</strong> to the root domain.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><link  href="/css/website.css"></link></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="link-rel" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="rel">
            rel
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types">link type</a>, explaining how the link relates to the current web page.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="link-rel-stylesheet" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy rel=&quot;stylesheet&quot;" data-clipboard-text="rel=&quot;stylesheet&quot;">
                      "stylesheet"
                  </code>
                </h4>
              <div class="value-description">
                <p>The link is a stylesheet.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><link  rel="stylesheet"></link></div>
            </aside>
          </article>
          <article id="link-rel-icon" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy rel=&quot;icon&quot;" data-clipboard-text="rel=&quot;icon&quot;">
                      "icon"
                  </code>
                </h4>
              <div class="value-description">
                <p>The link is a favicon.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><link  rel="icon"></link></div>
            </aside>
          </article>
          <article id="link-rel-author" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy rel=&quot;author&quot;" data-clipboard-text="rel=&quot;author&quot;">
                      "author"
                  </code>
                </h4>
              <div class="value-description">
                <p>The link is the web page&#39;s author website.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><link  rel="author"></link></div>
            </aside>
          </article>
          <article id="link-rel-next" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy rel=&quot;next&quot;" data-clipboard-text="rel=&quot;next&quot;">
                      "next"
                  </code>
                </h4>
              <div class="value-description">
                <p>The link is the next page.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><link  rel="next"></link></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="link-type" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="type">
            type
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the type of the linked resource.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="link-type-textcss" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy type=&quot;text/css&quot;" data-clipboard-text="type=&quot;text/css&quot;">
                      "text/css"
                  </code>
                </h4>
              <div class="value-description">
                <p>The link is a CSS file.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><link  type="text/css"></link></div>
            </aside>
          </article>
          <article id="link-type-texthtml" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy type=&quot;text/html&quot;" data-clipboard-text="type=&quot;text/html&quot;">
                      "text/html"
                  </code>
                </h4>
              <div class="value-description">
                <p>The link is an HTML document.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><link  type="text/html"></link></div>
            </aside>
          </article>
      </div>
    </article>
</section>

<section id="meta" class="element">
  <header class="element-header">
    <nav class="element-links">
      <span>
        Self-closing:
        <strong>
            No
        </strong>
      </span>
      <a class="element-links-direct" href="{{site.url}}/element/meta/" data-element-name="meta" data-tooltip="Single page for this element">Permalink</a>
      <a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="meta">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/meta" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="element-name">
      <a href="#meta">
        <span>#</span>
        meta
      </a>
    </h2>
    <div class="element-description">
      <p>Defines <strong>metadata</strong> attached to a web page.</p>

    </div>
  </header>

      <div id="meta-example-0" class="example">
        <p class="example-label">
          <strong>Example:</strong>
          <a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#meta-example-0-code">Copy</a>
        </p>
        <article class="example-preview">
          <div id="meta-example-0-code" class="example-code">{% highlight html %}<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">{% endhighlight %}</div>
        </article>
      </div>
      <div id="meta-example-1" class="example">
        <p class="example-label">
          <strong>Example:</strong>
          <a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#meta-example-1-code">Copy</a>
        </p>
        <article class="example-preview">
          <div id="meta-example-1-code" class="example-code">{% highlight html %}<!-- Refresh the page every 5 seconds -->
<meta http-equiv="refresh" content="5">{% endhighlight %}</div>
        </article>
      </div>
      <div id="meta-example-2" class="example">
        <p class="example-label">
          <strong>Example:</strong>
          <a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#meta-example-2-code">Copy</a>
        </p>
        <article class="example-preview">
          <div id="meta-example-2-code" class="example-code">{% highlight html %}<!-- Redirect instantly to https://cssreference.io -->
<meta http-equiv="refresh" content="0; url=https://cssreference.io">{% endhighlight %}</div>
        </article>
      </div>

    <article id="meta-charset" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="charset">
            charset
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the character encoding for the whole web page.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="meta-charset-utf-8" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy charset=&quot;UTF-8&quot;" data-clipboard-text="charset=&quot;UTF-8&quot;">
                      "UTF-8"
                  </code>
                </h4>
              <div class="value-description">
                <p>The value must be a valid <a href="https://www.iana.org/assignments/character-sets/character-sets.xhtml">character set</a>.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><meta  charset="UTF-8"></meta></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="meta-http-equiv" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="http-equiv">
            http-equiv
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines meta rules for the web page.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="meta-http-equiv-content-security-policy" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy http-equiv=&quot;Content-Security-Policy&quot;" data-clipboard-text="http-equiv=&quot;Content-Security-Policy&quot;">
                      "Content-Security-Policy"
                  </code>
                </h4>
              <div class="value-description">
                <p>Defines a link to a web page&#39;s <a href="https://developer.mozilla.org/en-US/docs/Web/Security/CSP/CSP_policy_directives">content policies</a>.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><meta  http-equiv="Content-Security-Policy"></meta></div>
            </aside>
          </article>
          <article id="meta-http-equiv-refresh" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy http-equiv=&quot;refresh&quot;" data-clipboard-text="http-equiv=&quot;refresh&quot;">
                      "refresh"
                  </code>
                </h4>
              <div class="value-description">
                <p>Allows to refresh the web page every N seconds, or even redirect to another URL.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><meta  http-equiv="refresh"></meta></div>
            </aside>
          </article>
          <article id="meta-http-equiv-x-ua-compatible" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy http-equiv=&quot;X-UA-Compatible&quot;" data-clipboard-text="http-equiv=&quot;X-UA-Compatible&quot;">
                      "X-UA-Compatible"
                  </code>
                </h4>
              <div class="value-description">
                <p>Defines which Internet Explorer verison the web page should be rendered as.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><meta  http-equiv="X-UA-Compatible"></meta></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="meta-name" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="name">
            name
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines additional information attached to the web page.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="meta-name-viewport" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy name=&quot;viewport&quot;" data-clipboard-text="name=&quot;viewport&quot;">
                      "viewport"
                  </code>
                </h4>
              <div class="value-description">
                <p>Defines dimension and scaling rules for the viewport.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><meta  name="viewport"></meta></div>
            </aside>
          </article>
          <article id="meta-name-theme-color" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy name=&quot;theme-color&quot;" data-clipboard-text="name=&quot;theme-color&quot;">
                      "theme-color"
                  </code>
                </h4>
              <div class="value-description">
                <p>Defines a theme color which can be used by the browser or the operating system.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><meta  name="theme-color"></meta></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="meta-content" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="content">
            content
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the content of the metadata. This varies according to the <code>name</code> or <code>http-equiv</code> value.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="meta-content-widthdevice-width-initial-scale1" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy content=&quot;width&#x3D;device-width, initial-scale&#x3D;1&quot;" data-clipboard-text="content=&quot;width&#x3D;device-width, initial-scale&#x3D;1&quot;">
                      "width&#x3D;device-width, initial-scale&#x3D;1"
                  </code>
                </h4>
              <div class="value-description">
                <p>For the <code>viewport</code> metadata, you can specify the width and initial scale of the web page.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><meta  content="width=device-width, initial-scale=1"></meta></div>
            </aside>
          </article>
          <article id="meta-content-2-urlhttpcssreferenceio" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy content=&quot;2; url&#x3D;https://cssreference.io&quot;" data-clipboard-text="content=&quot;2; url&#x3D;https://cssreference.io&quot;">
                      "2; url&#x3D;https://cssreference.io"
                  </code>
                </h4>
              <div class="value-description">
                <p>For the <code>refresh</code> metadata, you can specify how many seconds to wait before redirecting to another URL.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><meta  content="2; url=https://cssreference.io"></meta></div>
            </aside>
          </article>
      </div>
    </article>
</section>

<section id="script" class="element">
  <header class="element-header">
    <nav class="element-links">
      <span>
        Self-closing:
        <strong>
            No
        </strong>
      </span>
      <a class="element-links-direct" href="{{site.url}}/element/script/" data-element-name="script" data-tooltip="Single page for this element">Permalink</a>
      <a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="script">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/script" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="element-name">
      <a href="#script">
        <span>#</span>
        script
      </a>
    </h2>
    <div class="element-description">
      <p>Defines a container for an <strong>external script</strong>.</p>

    </div>
  </header>

      <div id="script-example-0" class="example">
        <p class="example-label">
          <strong>Example:</strong>
          <a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#script-example-0-code">Copy</a>
        </p>
        <article class="example-preview">
          <div id="script-example-0-code" class="example-code">{% highlight html %}<script src="{{site.url}}/javascript/my-scripts.js"></script>{% endhighlight %}</div>
        </article>
      </div>
      <div id="script-example-1" class="example">
        <p class="example-label">
          <strong>Example:</strong>
          <a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#script-example-1-code">Copy</a>
        </p>
        <article class="example-preview">
          <div id="script-example-1-code" class="example-code">{% highlight html %}<script type="text/javascript">
  console.log('Hello World');
</script>{% endhighlight %}</div>
        </article>
      </div>

    <article id="script-src" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="src">
            src
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the source of the external script.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="script-src-javascriptmy-scriptsjs" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy src=&quot;/javascript/my-scripts.js&quot;" data-clipboard-text="src=&quot;/javascript/my-scripts.js&quot;">
                      "/javascript/my-scripts.js"
                  </code>
                </h4>
              <div class="value-description">
                <p>The URL can be relative or absolute.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><script  src="/javascript/my-scripts.js"></script></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="script-type" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="type">
            type
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the <a href="https://www.iana.org/assignments/media-types/media-types.xhtml">MIME type</a> of the external script.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="script-type-textjavascript" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy type=&quot;text/javascript&quot;" data-clipboard-text="type=&quot;text/javascript&quot;">
                      "text/javascript"
                  </code>
                </h4>
              <div class="value-description">
                <p>This is for <code>.js</code> files.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><script  type="text/javascript"></script></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="script-async" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="async">
            async
          </code>
        </h3>
        <div class="attribute-description">
          <p>Allows the external script to be loaded asynchronously.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="script-async-undefined" class="value">
            <header class="value-header">
              <div class="value-description">

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><script  async></script></div>
            </aside>
          </article>
      </div>
    </article>
</section>

